<template>
  <div class="page-container">
      <!--工具栏-->
      <div class="toolbar" style="float:left;padding-top:10px;padding-left:15px;">
        <el-form :inline="true" :model="filters" :size="size">
          <el-row style="text-align: left;">
            <el-form-item label="受邀人账号/名称" prop="invitedpeople">
              <el-input v-model="filters.invitedpeople" placeholder="受邀人账号/名称"></el-input>
            </el-form-item>
            <el-form-item label="邀请人账号/名称" prop="invitepeople">
              <el-input v-model="filters.invitepeople" placeholder="邀请人账号/名称"></el-input>
            </el-form-item>
            <el-form-item label="是否分销员" prop="isseller">
              <el-select v-model="dataForm.isseller" placeholder="是否分销员">
                <el-option label="全选" value></el-option>
                <el-option
                  v-for="item in issellerOption"
                  :key="item.code"
                  :label="item.label"
                  :value="item.code">
                </el-option>
              </el-select>
            </el-form-item>
          </el-row>

          <el-row style="text-align: left;">
            <el-form-item label="下单时间" prop="ordertime">
              <el-date-picker
                v-model="dataForm.ordertime"
                type="date"
                value-format="yyyy-MM-dd"
                format="yyyy-MM-dd"
                placeholder="开始" class="input_postion">
              </el-date-picker>
            </el-form-item>
            <el-form-item label="" prop="ordertimes">
              <el-date-picker
                v-model="dataForm.ordertimes"
                type="date"
                value-format="yyyy-MM-dd"
                format="yyyy-MM-dd"
                placeholder="结束" class="input_postion">
              </el-date-picker>
            </el-form-item>
            <el-form-item label="订单完成时间" prop="order_endtime">
              <el-date-picker
                v-model="dataForm.order_endtime"
                type="date"
                value-format="yyyy-MM-dd"
                format="yyyy-MM-dd"
                placeholder="开始" class="input_postion">
              </el-date-picker>
            </el-form-item>
            <el-form-item label="" prop="order_endtimes">
              <el-date-picker
                v-model="dataForm.fail_date"
                type="date"
                value-format="yyyy-MM-dd"
                format="yyyy-MM-dd"
                placeholder="结束" class="order_endtimes">
              </el-date-picker>
            </el-form-item>
            <el-form-item prop="order_endtimes" label="订单编号">
              <el-input v-model="filters.sellername" placeholder="订单编号"></el-input>
            </el-form-item>
          </el-row>

          <el-row style="text-align: left;">
            <el-form-item label="奖励入账时间" prop="entrytime">
              <el-date-picker
                v-model="dataForm.entrytime"
                type="date"
                value-format="yyyy-MM-dd"
                format="yyyy-MM-dd"
                placeholder="开始" class="input_postion">
              </el-date-picker>
            </el-form-item>
            <el-form-item label="" prop="entrytimes">
              <el-date-picker
                v-model="dataForm.entrytimes"
                type="date"
                value-format="yyyy-MM-dd"
                format="yyyy-MM-dd"
                placeholder="结束" class="input_postion">
              </el-date-picker>
            </el-form-item>
          </el-row>

          <el-row style="text-align: left;">
            <el-form-item>
              <kt-button icon="fa fa-search" :label="$t('action.search')" type="primary"
                         @click="findPage"/>
            </el-form-item>
            <el-form-item>
              <kt-button icon="fa fa-refresh" :label="$t('action.reset')" @click="reset"
                         type="primary"/>
            </el-form-item>
          </el-row>

        </el-form>
        <div style="text-align: left;margin-top: 2%;">
          <el-button type="success" plain style="width:90px" @click.native="click1">已入账</el-button>
          <el-button type="success" plain style="width:90px" @click.native="click2">未入账</el-button>
        </div>
      </div>
      <div class="toolbar" style="float:right;padding-top:10px;padding-right:15px;">
        <el-form :inline="true" :size="size">
          <el-form-item>
            <el-button-group>
              <el-tooltip content="刷新" placement="top">
                <el-button icon="fa fa-refresh" @click="findPage"></el-button>
              </el-tooltip>
              <el-tooltip content="列显示" placement="top">
                <el-button icon="fa fa-filter" @click="displayFilterColumnsDialog"></el-button>
              </el-tooltip>
              <el-tooltip content="导出" placement="top">
                <el-button icon="fa fa-file-excel-o" @click="downloadExcel"></el-button>
              </el-tooltip>
            </el-button-group>
          </el-form-item>
        </el-form>
        <!--表格显示列界面-->
        <table-column-filter-dialog ref="tableColumnFilterDialog" :columns="columns"
                                    @handleFilterColumns="handleFilterColumns">
        </table-column-filter-dialog>

      </div>
      <!--表格内容栏-->
      <div v-show="showdiv1">
        <cy-table :height="350"
                  :data="pageResult" :columns="detailColumns"
                  @findPage="findPage" ref="CyTable"
                  :showOperation=false
                  :showBatchDelete="false" :showDeleteOperation=false :showEditOperation=false
                  :showDetailOperation=false :showSelection="false">
        </cy-table>
      </div>
      <div v-show="showdiv2">
        <cy-table :height="350"
                  :data="mockPage2" :columns="detailColumns2" ref="CyTable1"
                  @findPage="findPage2":showOperation=false
                  :showBatchDelete="false" :showDeleteOperation=false :showEditOperation=false
                  :showDetailOperation=false :showSelection="false">
        </cy-table>
      </div>
    </div>
</template>
<script src="//unpkg.com/element-ui@2.12.0/lib/index.js"></script>
<script>
  import PopupTreeInput from "@/components/PopupTreeInput"
  import CyTable from "@/views/Core/CyTable"
  import CyTable1 from "@/views/Core/CyTable"
  import KtButton from "@/views/Core/KtButton"
  import TableColumnFilterDialog from "@/views/Core/TableColumnFilterDialog"
  import {format} from "@/utils/datetime"

  export default {
    components: {
      PopupTreeInput,
      CyTable,
      CyTable1,
      KtButton,
      TableColumnFilterDialog
    },
    data() {
      return {
        imgUpload: this.utils.getUpLoadHost(),
        size: 'small',
        document_license: '',
        filters: {
          invitedpeople: '',
          invitepeople: '',
          isseller: '',
          ordertime: '',
          ordertimes: '',
          sellername: '',
          order_endtime: '',
          order_endtimes: '',
          entrytime: '',
          entrytimes: '',
          t: 'inviteRecord'
        },
        issellerOption: [{
          code: "0",
          label: "是"
        },{
          code: "1",
          label: "否"
        }],
        filtersCyTable1: {},
        addShow: false,
        textarea: '',
        imgs: '',
        fileList: {},
        columns: [],
        warehouselist: [],
        filterColumns: [],
        detailColumns: [
          { prop: "invitedpeople", label: "受邀人", minWidth: 120 },
          { prop: "invitepeople", label: "邀请人", minWidth: 100 },
          { prop: "logintime", label: "注册时间", minWidth: 100 },
          { prop: "ordertime", label: "下单时间", minWidth: 100 },
          { prop: "orderno", label: "订单编号", minWidth: 100 },
          { prop: "order_endtime", label: "订单完成时间", minWidth: 100 },
          { prop: "order_endtimes", label: "奖励入账时间", minWidth: 100 },
          { prop: "reward", label: "奖励", minWidth: 100 }
        ],
        detailColumns2: [
          { prop: "invitedpeople", label: "受邀人", minWidth: 120 },
          { prop: "invitepeople", label: "邀请人", minWidth: 100 },
          { prop: "logintime", label: "注册时间", minWidth: 100 },
          { prop: "ordertime", label: "下单时间", minWidth: 100 },
          { prop: "orderno", label: "订单编号", minWidth: 100 },
          { prop: "order_endtime", label: "订单完成时间", minWidth: 100 },
          { prop: "order_endtimes", label: "奖励入账时间", minWidth: 100 },
          { prop: "not_creidt_reward", label: "未入账奖励", minWidth: 100 },
          { prop: "not_creidt_reason", label: "未入账原因", minWidth: 100 }
        ],
        mockPage2: {
          total: "1",
          rows: [{
            id:"1",
            invitedpeople: "陈彪/17730226144",
            invitepeople: "袁野/15156081639",
            logintime: "2019-10-02 17:24:28",
            ordertime: "2019-10-16 17:24:32",
            orderno: "S6442",
            order_endtime: "2019-10-29 17:24:35",
            order_endtimes: "2019-10-30 17:24:39",
            not_creidt_reward: "￥300",
            not_creidt_reason: "非有效邀新"
          }]
        },
        pageRequest: {pageNum: 1, pageSize: 10},
        pageResult: {},
        dialogImageUrl: '',
        operation: false, // true:新增, false:编辑
        dialogVisible: false, // 新增编辑界面是否显示
        editLoading: false,
        printPage: false,
        dialogVisibleImage: false,
        detailDialogVisible: false,
        addDialogVisible: false,
        merchantVisible: false,//商户页面是否显示
        showdiv1: true,
        showdiv2: false,
        dataForm: {
          region: '',
          tradeCurrency: ''
        },
        deptData: [],
        deptTreeProps: {
          label: 'name',
          children: 'children'
        },
        roles: [],
        ruleForm: {
          name: '',
          region: '',
          date1: '',
          date2: '',
          delivery: false,
          type: [],
          resource: '',
          desc: ''
        },
        dataFormRules: {},
        rules: {
          data1: [
            {required: true, message: '选择一个日期', trigger: 'blur'}
          ],
          tradeCurrency: [
            {required: true, message: '请至少选择一个结算币别', trigger: 'blur'}
          ]
        }
      }
    },
    methods: {
      cancelClick(){
        this.addShow  = !this.addShow;
      },
      // 获取分页数据
      findPage: function (data) {
        this.$refs.CyTable.findPage(this.filters)
      },
      findPage2: function (data) {
        this.$refs.CyTable1.findPageMock(this.mockPage2);
      },
      click1: function (){
        this.showdiv1 = true;
        this.showdiv2 = false;
      },
      click2: function (){
        this.findPage2();
        this.showdiv1 = false;
        this.showdiv2 = true;
      },
      // 根据日期查询数据
      findPageByDate: function (data) {
        this.filters.t = 'payApplyForm'
        this.$refs.CyTable.findPageByDate(this.filters)
      },
      //弹窗关闭方法
      handleClose() {
        this.dialogVisible = false;
        this.$refs.dataForm.resetFields()
        this.textarea = '';
      },
      // 显示编辑界面
      handleEdit: function (params) {
        console.log(params);
        this.dialogVisible = true;
        this.operation = false;
        this.dataForm = Object.assign({}, params.row);
      },
      // 批量删除
      handleDelete: function (data) {
        var ids = '';
        for (var i = 0; i < data.params.length; i++) {
          ids = ids + data.params[i].id + ',';
        }
        data.t = 'payApplyForm'
        data.ids = ids
        this.utils.request.deleteUserInfo(data, this.deleteInfoBack)
      },
      //删除callback
      deleteInfoBack(data) {
        if (data.code == '0000') {
          this.$message({message: '操作成功', type: 'success'})
        } else {
          this.$message({message: '操作失败, ', type: 'error'})
        }
        this.findPage();
      },

      //导入方法
      importexe() {
        this.printPage = true;
      },
      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePreview(file) {
        console.log(file);
      },
      handleExceed(files, fileList) {
        this.$message.warning(
          `当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
      },
      beforeRemove(file, fileList) {
        return this.$confirm(`确定移除 ${file.name}？`);
      },

      //列表下载
      downloadExcel() {
        this.$confirm('确定下载列表文件?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let filename = "付款申请单"
          this.$refs.CyTable.exportData(this.filters, this.filterColumns, filename)
        }).catch(() => {

        });
      },
      // 打印
      print: function () {
        this.printPage = true
        this.operation = true
      },
      reset: function () {
        this.filters = {};
      },

      resetCyTable1: function () {
        this.filtersCyTable1 = {};
        this.clinkMock()
      },
      // 时间格式化
      dateFormat: function (row, column, cellValue, index) {
        return format(row[column.property])
      },

      // 处理表格列过滤显示
      displayFilterColumnsDialog: function () {
        this.$refs.tableColumnFilterDialog.setDialogVisible(true)
      },
      // 处理表格列过滤显示
      handleFilterColumns: function (data) {
        this.filterColumns = data.filterColumns
        this.$refs.tableColumnFilterDialog.setDialogVisible(false)
      },
      // 处理表格列过滤显示
      initColumns: function () {
        this.columns = []
        var temp = [];
        $.each(this.columns, function (key, val) {
          temp.push(val)
        })
        this.filterColumns = temp;
      },

      // 批量审核通过
      batchReviewSuccess: function () {
        this.$refs.CyTable.batchOperationMock("审核通过");
      },

      batchAutoRefund: function () {
        this.$refs.CyTable.batchOperationMock("退款成功");
      },

      addMock: function (dataForm) {
        this.$refs.dataForm.validate((valid) => {
          if (valid) {
            this.$confirm('确认提交吗？', '提示', {}).then(() => {
              var this_ = this;
              this.editLoading = true
            })
          }
        })
      },
    },
    mounted() {
      this.initColumns()
    }

  }
</script>
